<!--
 * @Author: your name
 * @Date: 2021-12-31 00:44:09
 * @LastEditTime: 2022-01-04 22:48:37
 * @LastEditors: your name
 * @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 * @FilePath: /ac_interface/src/views/Terminal.vue
-->
<template>
  <div class="container">  
    <p>  
      <el-button type="primary" style="width:20%;" @click="listVm" :loading="logining">用户已拥有虚拟机列表</el-button>
    </p>
    <p v-for="item in vmList">
     <el-button type="info" style="width:20%;" @click="showinfo(item)" :loading="logining">
       {{item.name}}</el-button>
    </p>
    <div>可以在下方输入：ssh {{this.name}}@{{this.host}}</div>
    <div>该机器的密码是：{{this.pass}}</div>
    <div id="xterm" class="xterm" />
   </div>
   
</template>

<script>
import { listMatch, showInfo } from '../api/match.js';
import { connect,shellCode} from '../api/vm.js';
import 'xterm/css/xterm.css'
import { Terminal } from 'xterm'
import { FitAddon } from 'xterm-addon-fit'
import { AttachAddon } from 'xterm-addon-attach'

export default {
  name: 'Xterm',
  data() {
    return {
      vmList:[],
      vmname:'',
      vmrole:'',
      uname:'',
      host:'',
      pass:'',
      desc:''
    }
  },
  props: {
    socketURI: {
      type: String,
      default: 'ws://172.21.4.154:4001'
    },
  },
  mounted() {
    this.listVm();
    this.initSocket()
  },
  beforeDestroy() {
    this.socket.close()
    this.term.dispose()
  },
  methods: {
    showinfo(item){
      this.getvmName(item);
      let {name, host, pass} = showInfo(this.$route.query.vmrole, this.vmname);
      this.name = name;
      this.host = host;
      this.pass = pass;
    },
    getvmName(item){
      this.vmname = item.name;
      alert(this.vmname);
    },
    forceUpdate() {
      this.$forceUpdate()
    },
    listVm(){
      let ret={};
      ret=listMatch(this.$route.query.username);
      this.vmList=ret.list; 
    },
    connectSsh(){
      let ret=connect(this.vmname,this.vmrole,this.$route.query.username);
      if(ret==0){
        //alert("连接成功");
      }
    },
    executeSsh(){
      let ret={};
      ret=shellCode(this.vmname,this.desc);
      console.log(ret.data);
      if(ret.code==0){
        alert("执行成功")
      }
    },
    initTerm() {
      const term = new Terminal({
        fontSize: 14,
        cursorBlink: true
      });
      const attachAddon = new AttachAddon(this.socket);
      const fitAddon = new FitAddon();
      term.loadAddon(attachAddon);
      term.loadAddon(fitAddon);
      term.open(document.getElementById('xterm'));
      fitAddon.fit();
      term.focus();
      this.term = term
    },
    initSocket() {
      this.socket = new WebSocket(this.socketURI);
      console.log('initsock');
      this.socketOnClose();
      this.socketOnOpen();
      this.socketOnError();
    },
    socketOnOpen() {
      this.socket.onopen = () => {
        // 链接成功后
        this.initTerm()
      }
    },
    socketOnClose() {
      this.socket.onclose = () => {
        // console.log('close socket')
      }
    },
    socketOnError() {
      this.socket.onerror = () => {
        // console.log('socket 链接失败')
      }
    }
  },
}
</script>

